<template>
  <div style="width:100%;height:102%;position: relative">
    <div id="mouse-position"></div>
    <div class="txt_box" v-if="cut == 1">
      <el-autocomplete
        class="inline-input"
        v-model="state1"
        :fetch-suggestions="querySearch"
        placeholder="请输入鸟类名称"
        @select="handleSelect"
        clearable
        :popper-append-to-body="false"
        @clear="changeClear"
      ></el-autocomplete>
    </div>
    <div class="footer_box" v-if="cut == 1">
      <div class="footer_left">
        <span>{{ fowltxt == "" ? "全部物种" : fowltxt }}每月发现频次</span>
        <div
          v-if="cut == 1"
          style="width: 100%;height: calc(100% - .29rem);"
          id="chart8"
        ></div>
      </div>
    </div>
    <!-- 鸟类监控地图弹窗E-->
    <div style="display: none">
      <div id="popup_two">
        <div class="ls_conters">
          <div class="ls_Title" style="height: .5rem;">
            <div class="ls_Title_left">
              <div class="xian_box"></div>
              <span>鸟类监控-{{ popObj.deviceName }}</span>
            </div>
            <div class="ls_Title_right" id="popup-closer" @click.stop="closer">
              <img src="../../../static/images/tuichu.png" alt="" />
            </div>
          </div>
          <div class="ls_video">
            <!-- <video style="width: 100%;height: 100%;background:#000" :src=videoUrl controls autoplay></video> -->
            <player
              v-if="newvideoUrl != null"
              :time="times"
              ref="playerRefs1"
              style="width: 100%;height: 100%;background:#000"
              :videoUrl="newvideoUrl"
              fluent
              autoplay
              @screenshot="shot"
              @destroy="destroy"
            />
          </div>
          <div class="ls_message">
            <div id="reev" @click="btn_cjgd(MonitoringpopObj)">
              <img src="../../../static/icon/jqsj.svg" alt="" />
              <span
                style="margin: 0 .16rem 0 .08rem;color: #fff;font-size: .16rem"
                >近期事件</span
              >
              <span style="color:#F93C3C;font-size: 26px;">{{ lengths }}</span>
              <img
                style="margin-left: 16px;"
                src="../../../static/icon/jinqishijian.svg"
                alt=""
              />
            </div>
            <div style="width: 1px;"></div>
            <div>
              <div id="btnAi" class="chgd_box" @click="btn_ai(popObj)">
                <span>AI识别</span>
              </div>
              <div id="btnCk" class="chgd_box" @click="btn_ck(popObj)">
                <span>查看更多</span>
              </div>
            </div>
          </div>
        </div>
        <div class="ls_arrows">
          <div class="i_arrows"></div>
        </div>
      </div>
    </div>
    <!-- 鸟类声纹弹窗 -->
    <div style="display: none">
      <div id="popup_Sound">
        <div class="ls_conters">
          <div class="ls_Title" style="height: 50px;">
            <div class="ls_Title_left">
              <div class="xian_box"></div>
              <span>{{ SoundpopObj.deviceName }}</span>
            </div>
            <div
              class="ls_Title_right"
              id="Sound-closer"
              @click.stop="Sound_closer"
            >
              <img src="../../../static/images/tuichu.png" alt="" />
            </div>
          </div>
          <div class="ls_video" style="height:.8rem;padding:0 .16rem;">
            <audio style="width: 100%;" :src="audioUrl" controls></audio>
          </div>
          <div class="ls_message" @click="btn_Soundck(SoundpopObj)">
            <div id="reev">
              <img src="../../../static/icon/jqsj.svg" alt="" />
              <span
                style="margin: 0 .16rem 0 .08rem;color: #fff;font-size: .16rem"
                >近期事件</span
              >
              <span style="color:#F93C3C;font-size: .26rem;">{{
                Soundlengths
              }}</span>
              <img
                style="margin-left: .16rem;"
                src="../../../static/icon/jinqishijian.svg"
                alt=""
              />
            </div>
          </div>
        </div>
        <div class="ls_arrows">
          <div class="i_arrows"></div>
        </div>
      </div>
    </div>
    <!-- 今日监测弹窗 -->
    <div style="display: none">
      <div id="popup_monitor">
        <div class="ls_conters" style="width: 4rem;">
          <div class="ls_Title" style="height: 40px;">
            <div class="ls_Title_left">
              <div class="xian_box"></div>
              <span
                >{{ monitorpopObj.deviceName }}-{{ monitorpopObj.bizTag }}</span
              >
            </div>
            <div
              class="ls_Title_right"
              id="Monitor-closer"
              @click.stop="Monitor_closer"
            >
              <img src="../../../static/images/tuichu.png" alt="" />
            </div>
          </div>
          <div
            class="ls_video"
            style="height:.8rem;padding:0 .16rem;"
            v-if="monitorType == 2"
          >
            <audio
              style="width: 100%;"
              :src="usrs + monitorUrl"
              controls
            ></audio>
          </div>
          <div class="ls_video" v-if="monitorType == 1">
            <video
              :src="usrs + monitorUrl"
              :controls="true"
              width="100%"
              height="100%"
              :autoplay="true"
            ></video>
          </div>
        </div>
        <div class="ls_arrows">
          <div class="i_arrows"></div>
        </div>
      </div>
    </div>
    <!-- AI识别 -->
    <div class="cldc" v-if="Aisaids">
      <div class="cloudControl">
        <div class="cl_Title">
          <span>{{ Aimsg.deviceName }}</span>
          <div class="cl_close" @click="btn_Aiedit">
            <img src="../../../static/images/tuichu.png" alt="" />
          </div>
        </div>
        <div class="cl_video">
          <div class="bigVideo" style="height: 100%;">
            <iframe
              style="width: 100%; height: 100%; border: none"
              :src="'http://223.71.254.174:35008/detect_Stream/' + Aimsg.hikId"
            ></iframe>
            <!-- <video :src="'http://172.17.3.12:5000/vis/detect_video/' + msg.hikId" controls autoplay></video> -->
          </div>
        </div>
      </div>
    </div>
    <!-- 监控画面 B-->
    <div>
      <div class="cldc" v-if="Isaids">
        <div class="cloudControl">
          <div class="cl_Title">
            <div class="zhixian_box">
              <span>监控点位-{{ dataList.deviceName }}</span>
            </div>
            <div class="cl_close" @click.stop="btn_edit">
              <img src="../../../static/images/tuichu.png" alt="" />
            </div>
          </div>
          <div class="cl_video">
            <div class="nav_box">
              <div class="nav_left">
                <div
                  style="width: 0.8rem"
                  v-for="item in navData"
                  :key="item.name"
                  @click="btn_toggle(item.id)"
                  :class="item.id == flag ? 'Select' : ''"
                >
                  {{ item.name }}
                </div>
              </div>
              <div class="nav_right" v-show="flag == 2">
                <p>
                  总计监测事件:<span style="color: rgba(60, 237, 255, 1)"
                    >{{ article }}条</span
                  >
                </p>
                <el-date-picker
                  v-model="value2"
                  type="year"
                  placeholder="请选择日期"
                  @change="getYear"
                  :disabled-date="pickerOptions"
                  :clearable="false"
                  style="width: 3.2rem;height: .4rem;"
                />
                <div style="width:.5rem"></div>
              </div>
            </div>
            <div class="bigVideo" v-show="flag == 0">
              <player
                ref="playerRefs"
                :videoUrl="jkUrl"
                fluent
                autoplay
                @screenshot="shot"
                @destroy="destroy"
              />
              <!-- <video :src="jkUrl" controls autoplay></video> -->
            </div>
            <div class="cl_set" v-show="flag == 0">
              <div @mousedown.left="Czi('zoomin')" @mouseup.left="Czi('stop')">
                <img src="../../../static/icon/zoomin.svg" alt="" />
              </div>
              <div @mousedown.left="Czi('zoomout')" @mouseup.left="Czi('stop')">
                <img src="../../../static/icon/zommout.svg" alt="" />
              </div>
              <div @click.stop="IsCll = !IsCll">
                <img
                  :src="
                    IsCll
                      ? '../../../static/icon/control.svg'
                      : '../../../static/icon/control.svg'
                  "
                  alt=""
                />
                <span style="margin-left: .08rem;">控制台</span>
              </div>
            </div>
            <div class="controller" v-if="IsCll" v-show="flag == 0">
              <img src="../../../static/icon/controller.svg" alt="" />
              <div
                class="c_t"
                @mousedown.left="Czi('up')"
                @mouseup.left="Czi('stop')"
              ></div>
              <div
                class="c_b"
                @mousedown.left="Czi('down')"
                @mouseup.left="Czi('stop')"
              ></div>
              <div
                class="c_l"
                @mousedown.left="Czi('left')"
                @mouseup.left="Czi('stop')"
              ></div>
              <div
                class="c_r"
                @mousedown.left="Czi('right')"
                @mouseup.left="Czi('stop')"
              ></div>
            </div>
            <div
              class="bigVideo"
              v-show="flag == 1"
              v-if="monitorData.length > 0"
            >
              <el-table
                :data="monitorData"
                style="width: 100%; z-index: 100;"
                height="6.3rem"
              >
                <el-table-column label="图片">
                  <template #default="scope">
                    <div class="demo-image__preview">
                      <img
                        :src="
                          '223.71.254.174:1087' + scope.row.bizContent.imageUrl
                        "
                        alt=""
                        style="width: .9rem; height: .92rem"
                        @click="btn_cks(scope.row)"
                      />
                      <!-- <viewer :images="srcList" style="width: 100%; height: 100%;border-radius: .08rem;">
                        <img :src="'http://220.249.51.134:10001' + scope.row.bizContent.imageUrl" alt=""
                          style="width: .9rem; height: .92rem" @click="btn_cks(scope.row)" />
                      </viewer> -->
                    </div>
                  </template>
                </el-table-column>
                <el-table-column prop="bizTag" label="物种">
                  <template #default="scope">
                    <span>{{
                      scope.row.bizTag == ""
                        ? "暂无物种名称..."
                        : scope.row.bizTag
                    }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="拍摄时间">
                  <template #default="{ row }">
                    <span>{{ new Date(row.occurTime).toLocaleString() }}</span>
                  </template>
                </el-table-column>
                <el-table-column prop="bizContent.reliability" label="可信度" />
                <el-table-column prop="title" label="动态分类" />
                <el-table-column prop="bizContent.eventType" label="动态等级" />
              </el-table>
              <el-pagination
                :current-page.sync="pageIndex"
                :page-size.sync="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :page-sizes="[5, 10, 20, 100]"
                :total="Soundtotal"
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
              />
            </div>
            <div class="bigVideo bigfoot" v-show="flag == 2">
              <div class="center">
                <div>
                  <div class="bigtop">
                    <p class="p1">ICUN名录统计</p>
                  </div>
                  <div class="top_foot">
                    <div id="chart3" style="width: 4.19rem;height: 100%;"></div>
                  </div>
                </div>
                <div>
                  <div class="bigtop">
                    <p class="p1">各月份发现频次</p>
                  </div>
                  <div class="top_foot">
                    <div id="chart4" style="width: 8.39rem;height: 100%;"></div>
                  </div>
                </div>
              </div>
              <div class="center divs">
                <div>
                  <div class="bigtop">
                    <p class="p1">保护等级数量统计</p>
                  </div>
                  <div class="top_foot">
                    <div id="chart5" style="width: 4.19rem;height: 100%;"></div>
                  </div>
                </div>
                <div>
                  <div class="bbt">
                    <p class="p1">各物种监测数量</p>
                  </div>
                  <div class="top_foot">
                    <div id="chart6" style="width: 8.39rem;height: 100%;"></div>
                  </div>
                </div>
              </div>
              <!-- 下 -->
              <div class="foot">
                <div class="bbt">
                  <p class="p1">各物种停留时间统计</p>
                </div>
                <div class="top_foot">
                  <div id="chart7" style="width: 12.8rem;height: 100%;"></div>
                  <!-- <mycharts width="12.8rem" :height="myheight" :option="option7"></mycharts> -->
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-image-viewer
      v-if="showImagePreview"
      :url-list="showsrcListref"
      teleported
      :on-close="closePreview"
      style="z-index: 3000"
    />
    <PopUp @Pop="ClosePop" v-if="IsPop" :msg="PopObj" />
  </div>
</template>

<script>
//  import MapPointData from "./Mapdata.vue";
import olMap from "ol/Map";
import View from "ol/View";
import { Vector as VectorSource, XYZ } from "ol/source";
import * as olProj from "ol/proj";
import {
  Image as ImageLayer,
  Tile as TileLayer,
  Vector as VectorLayer
} from "ol/layer";
import ImageWMS from "ol/source/ImageWMS";
import { Heatmap as HeatmapLayer } from "ol/layer";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import {
  Circle as CircleStyle,
  Fill,
  Icon,
  Stroke,
  Style,
  Text
} from "ol/style";
import GeoJSON from "ol/format/GeoJSON";
import Feature from "ol/Feature";
import MousePosition from "ol/control/MousePosition";
import { createStringXY } from "ol/coordinate";
import { getArea, getLength } from "ol/sphere";
import { DragBox, Draw, Modify, Select } from "ol/interaction";
import { LineString, Polygon } from "ol/geom";
//  import  * as geomLineString from 'ol/geom';
import Overlay from "ol/Overlay";
import { unByKey } from "ol/Observable";
import { getTopLeft, getWidth } from "ol/extent.js";
import { platformModifierKeyOnly } from "ol/events/condition";
import {
  FullScreen,
  defaults as defaultControls,
  OverviewMap
} from "ol/control";
import Point from "ol/geom/Point";
// import {FullScreen, defaults as defaultControls} from 'ol/control.js';
//  网页菜单 B
import "ol-contextmenu/dist/ol-contextmenu.min.css";
//  网页菜单 E
import "ol/ol.css";
//接入服务 B
import http from "../../utils/http";
import api from "../../utils/api";
import yujingxinxi from "../../../static/icon/yujingxinxi.svg";
import jinqishijian from "../../../static/icon/jinqishijian.svg";
import player from "./jessibuca.vue";
import PopUp from "./PopUp.vue";
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import * as axios from "axios";
import * as echarts from "echarts";
import msgpop from "../../../static/images/msgpop.png";
//接入服务 E
export default {
  components: {
    player,
    PopUp,
    ElImageViewer
  },
  props: {
    cut: {
      type: Number,
      required: true
    },
    Syears: {
      required: true
    }
  },
  data() {
    return {
      //        Mapdata: MapPointData.MapPoint,
      Map: null,
      ol3d: {},
      bml: "天地图",
      showList: [
        { boo: false },
        { boo: false },
        { boo: false },
        { boo: false },
        { boo: false },
        { boo: false },
        { boo: false }
      ],
      bmList: [],
      blList: [],
      bpList: [],
      bliList: [],
      blarr: [],
      bparr: [],
      bliarr: [],
      lon: "",
      lat: "",
      mrChecked: false,
      is3d: false,
      b1f: "../../static/images/icon/b1.png",
      center: [],
      level: 8,
      totalMap: {},
      levelNumber: 9,
      vectorSource: null, //图层源
      drawMesasure: null,
      pop_List: [],
      pop_P: [],
      bsl: [],
      popObj: {},
      MonitoringpopObj: {},
      SoundpopObj: {},
      monitorpopObj: {},
      listChangeFlag: false,
      rightMenu: null,
      isshowP: true,
      areaId: "",
      //详情按钮文字显示 文字 链接
      isdetails: false,
      isdetailsTetx: "",
      isdetailsLink: "",
      trackLine: {},
      jsonFake: {},
      flightTrackLayer: null,
      dwindex: 0,
      puplay: null,
      Soundpuplay: null,
      monitorpuplay: null,
      newvideoUrl: null,
      flag: 0,
      navData: [
        { name: "实时画面", id: 0 },
        { name: "监测事件", id: 1 },
        { name: "监测动态", id: 2 }
      ],
      Isaids: false,
      Aisaids: false,
      dataList: null,
      Aimsg: null,
      imei: "",
      aidsname: "",
      channelNumber: "",
      serialNumbers: "",
      playerRefs: [],
      playerRefs1: [],
      lengths: 0,
      Soundlengths: 0,
      audioUrl: "",
      monitorUrl: "",
      IsPop: false,
      IsCll: false,
      PopObj: null,
      monitorData: [],
      srcList: ["../../assets/logo.png"],
      Soundtotal: 0,
      pageIndex: 1,
      pageSize: 5,
      showImagePreview: false,
      showsrcListref: [],
      state1: "",
      restaurants: [],
      article: "",
      jkUrl: null,
      monitorType: null,
      years: "",
      value2: "",
      fowltxt: "",
      times: new Date().getTime(),
      newc: null,
      usrs: "http://223.71.254.174:1087/"
    };
  },
  watch: {
    Syears(newVal, oldVal) {
      if (newVal && this.newc == 1) {
        // 只有当 Syears 变化且 vut 等于 1 时，才执行下面的方法
        this.getPersonnel();
        this.getThermalmap();
      }
    }
  },
  created() {
    this.areaId = sessionStorage.getItem("areaId");
    this.years = new Date().getFullYear();
    this.value2 = `${new Date().getFullYear()}`;
    this.getFowl();
    this.newc = this.cut;
    if (this.cut == 1) {
      this.getPersonnel();
      this.getThermalmap();
    }
    // this.getMonitoring()
  },
  mounted() {},
  methods: {
    async getcenter() {
      let res = await http.get(api.EvenDetail + this.areaId);
      this.center = [res.data.mapConfig.lon, res.data.mapConfig.lat];
      this.level = res.data.mapConfig.level;
      this.jsonFake = res.data.layers.find(item => item.name == "保护地边界");
      this.creationMap();
    },
    creationMap() {
      var container = document.getElementById("popup_two");
      var Soundcontainer = document.getElementById("popup_Sound");
      var monitorcontainer = document.getElementById("popup_monitor");
      this.puplay = new Overlay({
        // element: container,
        // autoPan: true,
        // autoPanAnimation: {
        //   duration: 250
        // }
        element: container,
        autoPan: true,
        offset: [0, 0],
        autoPanAnimation: {
          duration: 250
        }
      });
      this.Soundpuplay = new Overlay({
        element: Soundcontainer,
        autoPan: true,
        offset: [0, 0],
        autoPanAnimation: {
          duration: 250
        }
      });
      this.monitorpuplay = new Overlay({
        element: monitorcontainer,
        autoPan: true,
        offset: [0, 0],
        autoPanAnimation: {
          duration: 250
        }
      });
      this.Map = new olMap({
        target: this.$el,
        layers: [],
        overlays: [this.puplay, this.Soundpuplay, this.monitorpuplay],
        // overlays: [this.overlay],
        // controls: defaultControls({
        //   attribution: false,
        //   zoom: false,
        //   rotate: false
        // }).extend([new OverviewMap()]),
        controls: defaultControls({
          attribution: false,
          zoom: false,
          rotate: false
        }).extend([new FullScreen()]),
        view: new View({
          //设置中心点
          center: olProj.fromLonLat(this.center),
          zoom: 12
        })
      });
      //创建底图图层
      //创建图层对象
      this.totalMap["bsaeMap"] = new TileLayer({
        source: new XYZ({
          url:
            "http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=f24cec70606332017dcd39a4fb60dd11"
        })
      });
      this.Map.addLayer(this.totalMap["bsaeMap"]);
      // //移入鼠标显示经纬度
      var mousePositionControl = new MousePosition({
        coordinateFormat: createStringXY(4),
        projection: "EPSG:4326",
        // comment the following two lines to have the mouse position
        // be placed within the map.
        className: "custom-mouse-position",
        target: document.getElementById("mouse-position"),
        undefinedHTML: "&nbsp;"
      });
      this.Map.addControl(mousePositionControl);
      this.mrCheckedFunc();
      var _self = this;
      this.Map.on("singleclick", function(event) {
        var feature = _self.Map.forEachFeatureAtPixel(event.pixel, function(
          feature,
          layer
        ) {
          return feature;
        });
        let arr = [feature.get("data").lon, feature.get("data").lat];
        var lat = olProj.fromLonLat(arr);
        var coordinate = event.coordinate;
        // let view = _self.Map.getView();
        // let resolution = view.getResolution();
        if (typeof feature != "undefined") {
          if (feature.get("type") == "birdPoint") {
            _self.popObj = feature.get("data");
            // console.log(_self.popObj, "_self.popObj");
            http
              .get(
                api.getEquipmentApi + _self.popObj.deviceCode + "/" + "yangqing"
              )
              .then(res => {
                // console.log(res, "sjs");
                if (res.data.code == 200) {
                  _self.lengths = res.data.data.records.length;
                  if (_self.lengths != 0) {
                    _self.MonitoringpopObj = res.data.data.records;
                    _self.MonitoringpopObj.forEach(
                      item => (item.status = "鸟类详情")
                    );
                  }
                  // else{
                  //   _self.$message({
                  //     message:
                  //       "暂无《" + _self.MonitoringpopObj.deviceName + "》设备信息",
                  //     type: "warning"
                  //   });
                  // }

                  // if (_self.lengths != 0) {
                  const pb = feature.get("data").channelNumber;
                  let num1 = JSON.parse(pb)[0].channelNumber;
                  let num2 = feature.get("data").serialNumber;
                  setTimeout(() => {
                    http.get(api.plays + num2 + "/" + num1).then(re => {
                      if (re.data.msg == "成功") {
                        _self.times = new Date().getTime();
                        _self.newvideoUrl = re.data.data.ws_flv;
                      }
                    }, 3000);
                    _self.puplay.setPosition(lat);
                    _self.puplay.setPositioning("bottom-center");
                    _self.puplay.setOffset([15, -60]);
                  });
                }
                // }
              });
            // _self.lengths = _self.popObj.notices.length;
            // const pb = feature.get("data").channelNumber;
            // let num1 = JSON.parse(pb)[0].channelNumber;
            // let num2 = feature.get("data").serialNumber;
            // setTimeout(() => {
            //   http.get(api.plays + num2 + "/" + num1).then(re => {
            //     if (re.data.msg == "成功") {
            //       _self.times = new Date().getTime();
            //       _self.newvideoUrl = re.data.data.ws_flv;
            //     }
            //   }, 3000);
            //   _self.puplay.setPosition(lat);
            //   _self.puplay.setPositioning("bottom-center");
            //   _self.puplay.setOffset([15, -60]);
            // });
          } else {
            let arr = feature.get("data");
            // _self.Soundlengths = _self.SoundpopObj.notices.length;
            http
              .get(api.getEquipmentApi + arr.deviceCode + "/" + "yangqing")
              .then(res => {
                // console.log(res, "sjs");
                if (res.data.code == 200) {
                  _self.Soundlengths = res.data.data.records.length;
                  if (_self.Soundlengths != 0) {
                    _self.SoundpopObj = res.data.data.records;
                    _self.SoundpopObj.forEach(
                      item => (item.status = "鸟类声纹")
                    );
                    // _self.SoundpopObj.status = '鸟类声纹'
                    _self.audioUrl =
                      _self.usrs + res.data.data.records[0].bizContent.videoUrl;
                    console.log(_self.audioUrl, "音频播放列表");
                    setTimeout(() => {
                      _self.Soundpuplay.setPosition(lat);
                      _self.Soundpuplay.setPositioning("bottom-center");
                      _self.Soundpuplay.setOffset([15, -60]);
                    }, 700);
                  } else {
                    _self.$message({
                      message: "暂无《" + arr.deviceName + "》声纹信息",
                      type: "warning"
                    });
                    return;
                  }
                }
              });

            // if (_self.Soundlengths != 0) {
            //   _self.audioUrl =
            //     _self.usrs +
            //     JSON.parse(_self.SoundpopObj.notices[0].bizContent).videoUrl;
            //   console.log(this.audioUrl, "音频播放列表");
            //   setTimeout(() => {
            //     _self.Soundpuplay.setPosition(lat);
            //     _self.Soundpuplay.setPositioning("bottom-center");
            //     _self.Soundpuplay.setOffset([15, -60]);
            //   }, 700);
            // } else {
            //   _self.$message({
            //     message: "暂无《" + _self.SoundpopObj.deviceName + "》声纹信息",
            //     type: "warning"
            //   });
            //   return;
            // }
          }
        }
      });
    },
    // setupMapClickListener() {
    //   var _self = this;
    //   this.Map.on("singleclick", function(event) {
    //     var feature = _self.Map.forEachFeatureAtPixel(event.pixel, function(
    //       feature,
    //       layer
    //     ) {
    //       return feature;
    //     });

    //     if (feature && feature.get("type") === "birdPoint") {
    //       // 触发视频播放
    //       _self.popObj = feature.get("data");
    //       _self.lengths = _self.popObj.notices.length;
    //       let coordinate = olProj.fromLonLat([
    //         feature.get("data").lon,
    //         feature.get("data").lat
    //       ]);
    //       _self.handleVideoPlay(feature, coordinate);
    //     } else {
    //       _self.SoundpopObj = feature.get("data");
    //       _self.Soundlengths = _self.SoundpopObj.notices.length;
    //       if (_self.Soundlengths != 0) {
    //         this.audioUrl =
    //           this.usrs +
    //           JSON.parse(_self.SoundpopObj.notices[0].bizContent).videoUrl;

    //         setTimeout(() => {
    //           _self.Soundpuplay.setPosition(lat);
    //           _self.Soundpuplay.setPositioning("bottom-center");
    //           _self.Soundpuplay.setOffset([15, -60]);
    //         }, 700);
    //       } else {
    //         _self.$message({
    //           message: "暂无《" + _self.SoundpopObj.deviceName + "》声纹信息",
    //           type: "warning"
    //         });
    //         return;
    //       }
    //     }
    //   });
    // },
    // 用于处理视频播放的函数
    handleVideoPlay(feature, coordinate) {
      const pb = feature.get("data").channelNumber;
      let num1 = JSON.parse(pb)[0].channelNumber;
      let num2 = feature.get("data").serialNumber;
      http.get(api.plays + num2 + "/" + num1).then(response => {
        if (response.data.msg == "成功") {
          // 只有在成功响应时才设置 videoUrl
          this.videoUrl = response.data.data.ws_flv;
          console.log(this.videoUrl, "视频播放列表");
          // 设定弹窗位置
          this.puplay.setPosition(coordinate);
          this.puplay.setPositioning("bottom-center");
          this.puplay.setOffset([15, -60]);
        }
      });
    },
    //图层选择项
    dlayer(arr, peg) {
      if (arr.indexOf(peg.name) == -1) {
        if (typeof this.totalMap[peg.id] != "undefined") {
          this.Map.removeLayer(this.totalMap[peg.id]);
          delete this.totalMap[peg.id];
        }
      } else {
        if (peg.layerType == "wms") {
          this.drawWMS(
            peg.id,
            peg.layerUrl,
            peg.layerName,
            peg.styleId,
            peg.cql
          );
          this.levelNumber++;
          this.totalMap[peg.id].setZIndex(this.levelNumber);
        } else if (peg.layerType == "xyz") {
          this.drawXYZ(peg.id, peg.layerUrl);
          this.levelNumber++;
          this.totalMap[peg.id].setZIndex(this.levelNumber);
        } else if (peg.layerType == "wmts") {
          this.drawWMTS(
            peg.id,
            peg.layerUrl,
            peg.layerName,
            peg.matrixSet,
            peg.format,
            peg.style
          );
          this.levelNumber++;
          this.totalMap[peg.id].setZIndex(this.levelNumber);
        } else {
          let then = this;
          (async function() {
            let res = await http.get(api.geoms + "?id=" + peg.id);
            then.previewshape(res.data.data, res.data.data[0].layerId);
            then.levelNumber++;
            then.totalMap[peg.id].setZIndex(then.levelNumber);
          })();
        }
        //设置图层层级 避免被遮挡
      }
    },
    //创建地图andcesium
    mrCheckedFunc() {
      let vm = this;
      setTimeout(function() {
        let peg = vm.jsonFake;
        let params = {
          LAYERS: peg.layerName,
          STYLES: peg.styleId,
          CQL_FILTER: "[" + peg.cql + "]"
        };
        vm.totalMap[peg.id] = new ImageLayer({
          source: new ImageWMS({
            url: peg.layerUrl,
            params: params,
            serverType: "geoserver"
          })
        });
        vm.Map.addLayer(vm.totalMap[peg.id]);
        vm.levelNumber++;
        vm.totalMap[peg.id].setZIndex(vm.levelNumber);
        // vm.levelNumber++;
        // vm.totalMap[peg.id].setZIndex(1);
      });
    },

    previewshape(data, id) {
      // 清除已存在的图层
      if (typeof this.totalMap[id] !== "undefined") {
        this.Map.removeLayer(this.totalMap[id]);
        delete this.totalMap[id];
      }
      return new Promise((resolve, reject) => {
        var vm = this;
        // 风格设置函数
        let styleFunction = function() {
          return function(feature, resolution) {
            const type = feature.getGeometry().getType();
            let style;
            switch (type) {
              case "Point":
              case "MultiPoint":
                if (feature.get("fillColor").indexOf("#") !== -1) {
                  style = new Style({
                    image: new CircleStyle({
                      radius: feature.get("radius"),
                      fill: new Fill({
                        color: feature.get("fillColor")
                      }),
                      stroke: new Stroke({
                        color: feature.get("borderColor"),
                        width: feature.get("size")
                      })
                    }),
                    text: new Text({
                      font: "12px Calibri,sans-serif",
                      text: "",
                      fill: new Fill({
                        color: feature.get("fillColor")
                      }),
                      offsetY: 15,
                      stroke: new Stroke({
                        color: "white",
                        width: 1
                      })
                    })
                  });
                } else {
                  style = new Style({
                    image: vm.addImage(feature, resolution),
                    text: new Text({
                      font: "20px 楷体,sans-serif",
                      text: feature.get("data").deviceName,
                      fill: new Fill({
                        color: "rgb(253, 231, 78)"
                      }),
                      offsetY: 15,
                      offsetX: 15,
                      stroke: new Stroke({
                        color: "rgb(249, 60, 60)",
                        width: 1
                      })
                    })
                  });
                }
                break;
              // 为其他几何类型添加更多的样式处理逻辑
            }
            return [style];
          };
        };
        // 创建图层和源
        let geojsonObject = {
          type: "FeatureCollection",
          crs: {
            type: "name",
            properties: {
              name: "EPSG:4326"
            }
          },
          features: []
        };
        this.vectorSource = new VectorSource({
          features: new GeoJSON({
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:3857"
          }).readFeatures(geojsonObject)
        });
        this.totalMap[id] = new VectorLayer({
          source: this.vectorSource,
          style: styleFunction()
        });
        let sources = this.totalMap[id].getSource();
        data.forEach(e => {
          sources.addFeatures(
            new GeoJSON({
              dataProjection: "EPSG:4326",
              featureProjection: "EPSG:3857"
            }).readFeatures({
              id: e.id,
              properties: e,
              type: "Feature",
              geometry: e.geojson,
              name: e.data.deviceName
            })
          );
        });
        this.totalMap[id].set("altitudeMode", "clampToGround");
        setTimeout(() => {
          this.Map.addLayer(this.totalMap[id]);
        }, 500);

        // 设置z-index，确保图层顺序正确
        var drawType = id.split("_");
        if (drawType.includes("Point")) {
          this.totalMap[id].setZIndex(99999999);
        }
        if (drawType.includes("LineString")) {
          this.totalMap[id].setZIndex(399 + this.levelNumber);
        }
        // 成功添加图层后，解决Promise
        resolve();
      });
    },
    // 热力图
    drawHeatMap(id, fenbu) {
      //判断是否已经存在相同id的图层 如果有删掉，再重新绘制
      if (typeof this.totalMap[id] != "undefined") {
        this.Map.removeLayer(this.totalMap[id]);
        delete this.totalMap[id];
      }
      /**geojson数据 绘制热力图**/
      let geojsonObject = {
        type: "FeatureCollection",
        crs: {
          type: "name",
          properties: {
            name: "urn:ogc:def:crs:OGC:1.3:CRS84"
          }
        },
        features: []
      };
      for (var i = 0; i < fenbu.length; i++) {
        var feature = {
          type: "Feature",
          geometry: {
            type: "Point",
            coordinates: olProj.transform(fenbu[i], "EPSG:4326", "EPSG:3857")
          }
        };
        geojsonObject.features.push(feature);
      }

      let heatmap = new HeatmapLayer({
        source: new VectorSource({
          features: new GeoJSON().readFeatures(geojsonObject)
        }),
        // 控制热力点的模糊度和半径大小
        blur: parseInt(10, 10),
        radius: parseInt(10, 5)
      });
      this.totalMap[id] = heatmap;
      this.Map.addLayer(heatmap);
    },
    addImage(feature, resolution) {
      let src = feature.get("iconSrc");
      let anchor = [0, 1];
      //根据图标文件名 设置定位点  地图上放置的图标更改文件名即可保持一致
      if (src != "") {
        if (src.indexOf("anchor_bottom_center") != -1) {
          anchor = [0.5, 1];
        } else if (src.indexOf("anchor_bottom_left") != -1) {
          anchor = [0, 1];
        } else if (src.indexOf("anchor_bottom_right") != -1) {
          anchor = [1, 1];
        } else if (src.indexOf("anchor_center_center") != -1) {
          anchor = [0.5, 0.5];
        } else if (src.indexOf("anchor_top_center") != -1) {
          anchor = [0.5, 0];
        } else if (src.indexOf("anchor_top_left") != -1) {
          anchor = [0, 0];
        } else if (src.indexOf("anchor_top_right") != -1) {
          anchor = [1, 0];
        }
        return new Icon({
          src: feature.get("iconSrc"),
          anchor: anchor,
          scale: 0.2 // 设置图片的缩放比例，0.5表示缩小为原来的50%
        });
      }
    },
    // 信息框
    async getThermalmap() {
      let res = await http.get(api.getMapHeatApi, {
        paramYear: this.Syears,
        speciesName: this.fowltxt
      });
      if (res.data.code == 200) {
        let arr = res.data.data.map((item, index) => ({
          id: index,
          iconSrc: msgpop,
          data: item,
          geojson: { coordinates: [item.lon, item.lat], type: "Point" }
        }));
        this.Newpreviewshape(arr, "msgPop");
      }
    },
    //绘制geojson类型
    Newpreviewshape(data, id) {
      var vm = this;
      //判断是否已经存在相同id的图层 如果有删掉，再重新绘制
      if (typeof this.totalMap[id] != "undefined") {
        this.Map.removeLayer(this.totalMap[id]);
        delete this.totalMap[id];
      }
      let styleFunction = function() {
        return function(feature, resolution) {
          //点
          if (feature.getGeometry().getType() == "Point") {
            var point = new Style({
              image: new Icon({
                anchor: [0.5, 1],
                anchorXUnits: "fraction",
                anchorYUnits: "fraction",
                src: feature.get("iconSrc"),
                scale: 0.8
              }),
              text: new Text({
                font: "16px 楷体,sans-serif",
                text: feature.get("data").species + "",
                fill: new Fill({
                  color: "#2efff2"
                }),
                offsetY: -33,
                offsetX: 0
              })
            });
            return [point];
          }
        };
      };
      let geojsonObject = {
        type: "FeatureCollection",
        crs: {
          type: "name",
          properties: {
            name: "EPSG:4326"
          }
        },
        features: []
      };
      this.vectorSource = new VectorSource({
        features: new GeoJSON({
          defaultDataProjection: "EPSG:4326",
          featureProjection: "EPSG:3857"
        }).readFeatures(geojsonObject)
      });
      this.totalMap[id] = new VectorLayer({
        source: this.vectorSource,
        style: styleFunction()
      });
      let sources = this.totalMap[id].getSource();
      data.forEach(e => {
        sources.addFeatures(
          new GeoJSON({
            dataProjection: "EPSG:4326",
            featureProjection: "EPSG:3857"
          }).readFeatures({
            id: e.id,
            properties: e,
            type: "Feature",
            geometry: e.geojson,
            name: e.data.species
          })
        );
      });
      this.totalMap[id].set("altitudeMode", "clampToGround");
      this.Map.addLayer(this.totalMap[id]);
    },
    // 删除图层
    delPoint(id) {
      if (typeof this.totalMap[id] !== "undefined") {
        this.Map.removeLayer(this.totalMap[id]);
        delete this.totalMap[id];
      }
    },
    //关闭弹窗
    closer() {
      var closer = document.getElementById("popup-closer");
      this.puplay.setPosition(undefined);
      closer.blur();
      return false;
    },
    //关闭弹窗
    Sound_closer() {
      var closer = document.getElementById("Sound-closer");
      this.Soundpuplay.setPosition(undefined);
      closer.blur();
      return false;
    },
    //关闭弹窗
    Monitor_closer() {
      var closer = document.getElementById("Monitor-closer");
      this.monitorpuplay.setPosition(undefined);
      closer.blur();
      return false;
    },
    btn_ck(a) {
      this.dataList = a;
      // this.Isaids = true
      this.mtaids(a);
    },
    btn_ai(a) {
      // console.log(a, "aaaaaaa");
      this.Aimsg = a;
      this.Aisaids = true;
      // // this.Isaids = true
      // this.mtaids(a);
    },
    btn_edit() {
      this.Isaids = false;
      this.flag = 0;
    },
    btn_Aiedit() {
      this.Aisaids = false;
    },
    btn_toggle(id) {
      this.flag = id;
      if (id == 1) {
        this.getMonitoringDynamic(this.imei);
      } else if (id == 2) {
        this.getICUN();
        this.getmonitorquantity();
        this.getEventscale();
        this.getMonthtype();
        this.getArticle();
        this.getMonitor();
      }
    },
    async mtaids(data) {
      let arr = JSON.parse(data.channelNumber);
      let deviceId = data.serialNumber;
      this.imei = data.imei;
      this.aidsname = data.deviceName;
      let channelId = arr[0].channelNumber;
      this.channelNumber = arr[0].channelNumber;
      this.serialNumbers = data.serialNumber;
      const res = await http.get(api.plays + deviceId + "/" + channelId);
      this.Isaids = true;
      if (res.data.code == 0) {
        this.jkUrl = res.data.data.ws_flv;
      } else {
        this.$message({
          type: "warning", // success error warning
          message: res.data.msg
        });
      }
    },
    destroy(idx) {
      clear(idx.substring(idx.length - 1));
    },
    shot(e) {
      var base64ToBlob = function(code) {
        let parts = code.split(";base64,");
        let contentType = parts[0].split(":")[1];
        let raw = window.atob(parts[1]);
        let rawLength = raw.length;
        let uInt8Array = new Uint8Array(rawLength);
        for (let i = 0; i < rawLength; ++i) {
          uInt8Array[i] = raw.charCodeAt(i);
        }
        return new Blob([uInt8Array], {
          type: contentType
        });
      };
      let aLink = document.createElement("a");
      let blob = base64ToBlob(e); //new Blob([content]);
      let evt = document.createEvent("HTMLEvents");
      evt.initEvent("click", true, true); //initEvent 不加后两个参数在FF下会报错  事件类型，是否冒泡，是否阻止浏览器的默认行为
      aLink.download = "截图";
      aLink.href = URL.createObjectURL(blob);
      aLink.click();
    },
    ClosePop() {
      this.IsPop = false;
    },
    // 鸟类监控查看更多
    btn_cjgd(data) {
      // console.log(data, "datasss");
      // data[0].status = "鸟类详情";
      // this.PopupObj['type'] = '鸟类详情';
      // if (data) {
      //   this.$message({
      //     message:"该设备暂无近期事件",
      //     type: "warning"
      //   });
      // } else {
      //   this.IsPop = true;
      //   this.PopObj = data;
      // }

      if (Object.keys(data).length === 0) {
        // data 对象为空的情况
        this.$message({
          message: "该设备暂无近期事件",
          type: "warning"
        });
      } else {
        // data 对象不为空的情况
        this.IsPop = true;
        this.PopObj = data;
      }
    },
    // 鸟类声纹查看更多
    btn_Soundck(data) {
      // console.log(data, "鸟");

      // data[0].status = "鸟类声纹";
      if (data.length <= 0) {
        this.$message({
          message: data.deviceName + "该设备暂无近期事件",
          type: "warning"
        });
      } else {
        this.IsPop = true;
        this.PopObj = data;
      }
    },
    // 今日监测动态弹窗定位
    btn_tc(coordinate, item) {
      let point = olProj.fromLonLat(coordinate);
      let view = this.Map.getView();
      let resolution = view.getResolution();
      let yOffset = 100 * resolution; // 偏下100像素
      let centerPoint = [point[0], point[1]];
      // 使用 animate 方法进行平滑过渡
      view.animate(
        {
          center: centerPoint,
          zoom: 14,
          duration: 750 // 动画持续时间，单位毫秒
        }
        // {
        //   zoom: 14,
        //   duration: 1000,
        //   // easing: ol.easing.easeOut
        // }
      );
      // 设置弹窗在动画完成后显示
      setTimeout(() => {
        this.monitorpopObj = item;
        this.monitorUrl = item.list.videoUrl;
        this.monitorType = item.list.type;
        this.monitorpuplay.setPosition(point);
        this.monitorpuplay.setPositioning("bottom-center");
        this.monitorpuplay.setOffset([15, -60]);
      }, 800); // 800毫秒后检查
    },
    // 监测动态
    async getMonitoringDynamic(channelNo) {
      let res = await http.get(api.getDeviceMonitorApi, {
        deviceCode: channelNo,
        pageIndex: this.pageIndex,
        pageSize: this.pageSize
      });
      if (res.data.code == 200) {
        this.monitorData = res.data.data.records;
      }
      this.Soundtotal = res.data.data.total;
    },
    handleSizeChange() {
      this.getMonitoringDynamic(this.imei);
    },
    handleCurrentChange() {
      this.getMonitoringDynamic(this.imei);
    },
    // 查看大图
    btn_cks(img) {
      this.showImagePreview = true;
      this.showsrcListref.unshift(
        "http://220.249.51.134:10001" + img.bizContent.imageUrl
      );
    },
    // 关闭大图
    closePreview() {
      this.showImagePreview = false;
      this.showsrcListref = [];
    },
    // 获取时间
    getYear(val) {
      this.years = val.getFullYear() + "";
      this.getICUN();
      this.getMonthtype();
      this.getmonitorquantity();
      this.getEventscale();
      this.getArticle();
      this.getMonitor();
      // if (this.cut == 1) {
      //   this.getPersonnel()
      //   this.getThermalmap()
      // }
      // this.getMonitoring();
    },
    // 不能选择未来时间
    pickerOptions(time) {
      return new Date().getFullYear() < time.getFullYear();
    },
    // 云台控制
    async Czi(a) {
      // let d = 255;
      // const baseUrl = "http://220.249.51.134:10002/api/ptz/control/";
      // const url = `${baseUrl}${this.serialNumbers}/${this.channelNumber}`;
      // const params = {
      //   command: a,
      //   horizonSpeed: d,
      //   verticalSpeed: d,
      //   zoomSpeed: d
      // };
      // let res = await axios.post(url, null, { params: params });
      let d = 255;
      const baseUrl = "http://36.99.41.50/api/ptz/control/";
      const url = `${baseUrl}${this.serialNumbers}/${this.channelNumber}`;
      const params = {
        command: a,
        horizonSpeed: d,
        verticalSpeed: d,
        zoomSpeed: d
      };
      let res = await axios.post(url, null, { params: params });
    },
    // 监测动态
    // ICUN名录统计
    async getICUN() {
      let res = await http.get(api.getICUNApi, {
        paramYear: this.years,
        areaId: this.areaId,
        deviceCode: this.imei
      });
      let arr = res.data.data;
      let X = Object.values(arr).map(item => item.speciesLevel.toString());
      let Y = Object.values(arr).map(item => item.speciesNumber.toString());
      this.drawbar1(X, Y);
    },
    drawbar1(X, Y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart3"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart3"));
      }
      let option = {
        tooltip: {
          trigger: "item"
        },
        grid: {
          top: "10%",
          right: 0,
          left: "13%",
          bottom: "13%"
        },
        xAxis: [
          {
            type: "category",
            color: "#59588D",
            // data: ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
            data: X,
            axisPointer: {
              type: "line"
            },
            axisTick: {
              show: false
            },
            axisLabel: {
              show: true,
              interval: 0,
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem"
            },
            lineStyle: {
              color: "rgba(255, 255, 255, 0.80)",
              width: 1,
              type: "solid"
            }
          }
        ],
        yAxis: [
          {
            // min: 0,
            // max: 100,
            axisLabel: {
              show: true,
              interval: 0,
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".14rem"
            },
            axisLine: {
              show: false
            },
            splitLine: {
              lineStyle: {
                color: "#40658c"
              }
            }
          }
        ],
        // dataZoom: [{  //添加dataZoom属性即可显示滑动条S
        //   orient: 'horizontal',
        //   show: true,//控制滚动条显示隐藏
        //   realtime: true, //拖动滚动条时是否动态的更新图表数据
        //   handleSize: 0,
        //   height: '3%', //滚动条高度
        //   start: 0, //滚动条开始位置（共6等份）
        //   end: 60,//滚动条结束位置
        //   top: '94%',
        //   // bottom: '20%',
        //   left: '5%', //滚动条靠左侧的百分比
        //   zoomLock: false, //控制面板是否进行缩放
        //   startValue: 0, // 从头开始。
        //   endValue: 5,// 一次性展示6个
        //   showDetail: false, // 关闭滚动条提示
        //   backgroundColor: "rgb(63, 116, 168 , 0.5)",
        //   fillerColor: 'rgba(255, 255, 255,0.5)',
        //   zoomLock: true,
        //   zoomOnMouseWheel: false,
        //   brushSelect: false,
        //   showDetail: false,
        //   showDataShadow: false
        // }],
        series: [
          {
            type: "bar",
            // data: [100, 90, 10, 90, 90, 20, 56, 89, 92, 20, 57, 82],
            data: Y,
            barWidth: "30%",
            itemStyle: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(250, 137, 164, 1)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(250, 137, 164, 0.1)" // 100% 处的颜色
                  }
                ],
                false
              ),
              borderRadius: [10, 10, 0, 0]
              // shadowColor: 'rgba(0,255,225,1)',
              // shadowBlur: 4,
            }
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 各月份发现频次
    async getMonitor() {
      let res = await http.get(api.getMonthApi, {
        paramYear: this.years,
        deviceCode: this.imei
      });
      let arr = res.data.data.months;
      let X = arr.map(item => item + "月");
      let Y = res.data.data.notices;
      this.drawbar2(X, Y);
    },
    drawbar2(X, Y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart4"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart4"));
      }
      let option = {
        tooltip: {},
        legend: {
          icon: "circle",
          right: 30,
          top: "3%",
          textStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".14rem"
          },
          itemWidth: 10,
          itemHeight: 10,
          itemGap: 50
        },
        grid: {
          top: "10%",
          left: "1%",
          right: 0,
          bottom: "10%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          // data: ['Mon', 'Tue', 'Wed', 'Thu'],
          data: X,
          axisLine: {
            show: true,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.80)",
              width: 1,
              type: "solid"
            }
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0,
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem"
            // rotate: '45',
          }
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: true,
            interval: 0,
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".14rem"
          },
          axisLine: {
            show: false,
            lineStyle: {
              width: 1,
              type: "solid"
            }
          },
          splitLine: {
            lineStyle: {
              color: "#40658c"
            }
          }
        },
        series: [
          {
            // data: [150, 230, 224, 218, 135, 147, 260],
            data: Y,
            type: "line",
            lineStyle: {
              color: "#fcc72d"
            },
            itemStyle: {
              color: "#fcc72d" // 点的颜色，蓝色
            },
            symbolSize: 5 // 点的大小
          }
        ],
        dataZoom: [
          {
            //添加dataZoom属性即可显示滑动条S
            orient: "horizontal",
            show: true, //控制滚动条显示隐藏
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            handleSize: 0,
            height: "3%", //滚动条高度
            start: 0, //滚动条开始位置（共6等份）
            end: 60, //滚动条结束位置
            top: "94%",
            // bottom: '20%',
            left: "5%", //滚动条靠左侧的百分比
            zoomLock: false, //控制面板是否进行缩放
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个
            showDetail: false, // 关闭滚动条提示
            backgroundColor: "rgb(63, 116, 168 , 0.5)",
            fillerColor: "rgba(255, 255, 255,0.5)",
            zoomLock: true,
            zoomOnMouseWheel: false,
            brushSelect: false,
            showDetail: false,
            showDataShadow: false
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 各保护级别监测数量
    async getEventscale() {
      let res = await http.get(api.getLevelApi, {
        paramYear: this.years,
        areaId: this.areaId,
        deviceCode: this.imei
      });
      let arr = res.data.data;
      if (arr.length == 0) {
        let num = 0;
        let text = "国家一级";
        let name = "国家二级";
        let data = 0;
        let dataNumber = 0;
        let data2 = 0;
        let data2Number = 0;
        this.drawbar3(text, name, data, dataNumber, data2, data2Number);
      } else {
        let num = arr.reduce((acc, item) => acc + item.speciesNumber, 0);
        let text = arr[0].speciesLevel;
        let name = arr[1].speciesLevel;
        let data = arr[0].speciesNumber;
        let dataNumber = num - arr[0].speciesNumber;
        let data2 = arr[1].speciesNumber;
        let data2Number = num - arr[1].speciesNumber;
        this.drawbar3(text, name, data, dataNumber, data2, data2Number);
      }
    },
    drawbar3(text, name, data, dataNumber, data2, data2Number) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart5"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart5"));
      }
      let option = {
        tooltip: {
          trigger: "item"
        },
        title: [
          {
            // text: '国家Ⅰ级',
            text: text,
            left: "24%",
            top: "80%",
            textAlign: "center",
            textStyle: {
              fontWeight: "normal",
              fontSize: ".16rem",
              color: "#AAAFC8",
              textAlign: "center"
            }
          },
          {
            // text: '国家Ⅱ级',
            text: name,
            left: "74%",
            top: "80%",
            textAlign: "center",
            textStyle: {
              color: "#AAAFC8",
              fontWeight: "normal",
              fontSize: ".16rem",
              textAlign: "center"
            }
          }
        ],
        series: [
          {
            // name: '第一个圆环',
            name: text,
            type: "pie",
            clockwise: false,
            radius: ["70%", "55%"],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            shadowBlur: 0,
            center: ["25%", "40%"],
            data: [
              {
                value: data,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#0ad0a1",
                        align: "center",
                        fontSize: ".12rem",
                        fontWeight: "bold"
                      },
                      b: {
                        color: "#fff",
                        align: "center",
                        fontSize: ".14rem"
                      }
                    },
                    formatter: function(params) {
                      return "{a|" + params.value + "只/次}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: ".16rem",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  color: "#0ad0a1",
                  shadowColor: "#2c6cc4",
                  shadowBlur: 0
                }
              },
              {
                value: dataNumber,
                name: "invisible",
                itemStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                  emphasis: {
                    color: "#24375c"
                  }
                }
              }
            ]
          },
          {
            // name: '第二个圆环',
            name: name,
            type: "pie",
            clockwise: false,
            radius: ["70%", "55%"],
            label: {
              show: false
            },
            labelLine: {
              show: false
            },
            shadowBlur: 0,
            center: ["75%", "40%"],
            data: [
              {
                value: data2,
                label: {
                  normal: {
                    rich: {
                      a: {
                        color: "#ea7ccc",
                        align: "center",
                        fontSize: ".12rem",
                        fontWeight: "bold"
                      },
                      b: {
                        color: "#fff",
                        align: "center",
                        fontSize: ".14rem"
                      }
                    },
                    formatter: function(params) {
                      return "{a|" + params.value + "只/次}";
                    },
                    position: "center",
                    show: true,
                    textStyle: {
                      fontSize: ".16rem",
                      fontWeight: "normal",
                      color: "#fff"
                    }
                  }
                },
                itemStyle: {
                  color: "#ea7ccc",
                  shadowColor: "#fff",
                  shadowBlur: 0
                }
              },
              {
                value: data2Number,
                name: "invisible",
                itemStyle: {
                  color: "rgba(255, 255, 255, 0.3)",
                  emphasis: {
                    color: "#412a4e"
                  }
                }
              }
            ]
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    async getmonitorquantity() {
      let res = await http.get(api.getCategoryApi, {
        paramYear: this.years,
        deviceCode: this.imei
      });
      let arr = res.data.data;
      // 循环遍历数组中的每个对象
      let transformedData = arr.map(item => {
        // 将title属性改为name，将noticeNumber属性改为value
        return {
          name: item.speciesName,
          value: item.speciesNumber
        };
      });
      this.drawbar4(transformedData);
    },
    drawbar4(data) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart6"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart6"));
      }
      let option = {
        tooltip: {
          trigger: "item"
        },
        legend: {
          type: "scroll",
          orient: "horizontal", // 设置图例布局为垂直显示
          top: "10", // 居中对齐
          textStyle: {
            color: "#fff",
            fontSize: ".12rem"
          },
          pageTextStyle: {
            color: "#fff" // 设置滑块数字颜色为红色
          },
          pageIconColor: "#fff" // 设置滑块颜色为绿色
        },

        series: [
          {
            name: "物种数量",
            type: "pie",
            center: ["50%", "60%"],
            radius: ["50%", "70%"],
            // 调整饼图位置
            avoidLabelOverlap: false,
            label: {
              show: true,
              position: "inside",
              formatter: `{d}`,
              color: "#fff",
              fontSize: ".14rem"
            },
            labelLine: {
              show: false
            },
            // data: [],
            data: data
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 各物种停留时间统计
    async getMonthtype() {
      let projectItems, startDays, endDays, earliestStartDate;
      try {
        // 假设 value3 和 imei 是外部定义的变量，这里仅用于示例
        let response = await http.get(api.getDeviceMonitorCountApi, {
          paramYear: this.years,
          deviceCode: this.imei
        });
        if (!response.data || !response.data.data) {
          console.error("无有效数据返回");
          return; // 退出函数，因为没有数据可以处理
        }
        let speciesData = response.data.data;
        // 提取物种名称、开始日期和结束日期
        projectItems = speciesData.map(item => item.speciesName.toString());
        startDays = speciesData.map(item => new Date(item.startDay).valueOf());
        endDays = speciesData.map(
          item =>
            new Date(item.endDay).valueOf() -
            startDays[speciesData.indexOf(item)]
        );
        // 更新图表数据
        // 找到最小的开始日期
        earliestStartDate = Math.min(...startDays);
        let Xdata = [...projectItems];
        let Sdata = [...startDays];
        let Sdata1 = [...endDays];
        let min = earliestStartDate;
        this.drawbar5(Xdata, Sdata, Sdata1, min);
      } catch (error) {
        console.error("数据获取或处理中发生错误:", error);
      }
    },
    drawbar5(Xdata, Sdata, Sdata1, min) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart7"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart7"));
      }
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: function(params) {
            var tar = params[1];
            return (
              tar.name +
              "<br />" +
              tar.seriesName +
              " : " +
              tar.value / (1000 * 60 * 60 * 24) +
              "天"
            );
          }
        },
        grid: {
          top: "3%",
          left: "1%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        yAxis: {
          type: "category",
          minInterval: 1,
          splitLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: true,
            interval: 0.5,
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem"
          },
          axisLine: {
            show: false
          },
          data: Xdata
        },
        xAxis: {
          type: "value",
          position: "top",
          min: min,
          axisLabel: {
            show: true,
            interval: 0,
            color: "#fff", // 颜色已在上方声明，不需要重复
            fontSize: ".14rem",
            formatter: function(param) {
              let date = new Date(param);
              let dateLabel = date.getFullYear() + "-" + (date.getMonth() + 1);
              return dateLabel;
            }
          },
          lineStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            width: 1,
            type: "solid"
          }
        },
        dataZoom: [
          {
            orient: "vertical",
            maxValueSpan: 25,
            show: true,
            realtime: true,
            handleSize: 0,
            height: "90%",
            width: ".5%",
            start: 0,
            end: 100,
            top: "5%",
            right: "1%",
            bottom: "5%",
            zoomLock: true,
            zoomOnMouseWheel: true,
            brushSelect: false,
            showDetail: false,
            showDataShadow: false,
            backgroundColor: "rgb(63, 116, 168 , 0.5)",
            fillerColor: "rgba(255, 255, 255,0.5)"
          }
        ],
        series: [
          {
            name: "Placeholder",
            type: "bar",
            stack: "Total",
            itemStyle: {
              borderColor: "transparent",
              color: "transparent"
            },
            emphasis: {
              itemStyle: {
                borderColor: "transparent",
                color: "transparent"
              }
            },
            data: Sdata
          },
          {
            name: "周期",
            type: "bar",
            stack: "Total",
            data: Sdata1
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    // 累计事件统计
    async getArticle() {
      let res = await http.get(api.getDeviceTotalCountApi, {
        paramYear: this.years,
        deviceCode: this.imei
      });
      this.article = res.data.data.species;
    },
    // 获取鸟类名称
    async getFowl() {
      let res = await http.get(api.getBirdsNameApi, {
        areaId: this.areaId
      });
      this.restaurants = res.data.data.map(item => ({ value: item }));
    },
    querySearch(queryString, cb) {
      const results = queryString
        ? this.restaurants.filter(this.createFilter(queryString))
        : this.restaurants;
      // call callback function to return suggestions
      cb(results);
    },
    createFilter(queryString) {
      return restaurant => {
        return (
          restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) ===
          0
        );
      };
    },
    handleSelect(item) {
      this.fowltxt = item.value;
      if (this.cut == 1) {
        this.getPersonnel();
        this.getThermalmap();
      }
      this.getMonitoring();
    },
    changeClear() {
      this.fowltxt = "";
      this.getPersonnel();
      this.getMonitoring();
      this.getThermalmap();
    },
    // 全部物种发现频次
    async getPersonnel() {
      let res = await http.get(api.getMonthSpeciesApi, {
        paramYear: this.Syears,
        speciesName: this.fowltxt
      });
      if (res.data.code == 200) {
        let arr = res.data.data.months;
        let X = arr.map(item => item + "月");
        let Y = res.data.data.notices;
        setTimeout(() => {
          this.drawbar8(X, Y);
        }, 100);
        // this.drawbar8(X, Y)
      }
    },
    drawbar8(x, y) {
      let myChart = echarts.getInstanceByDom(document.getElementById("chart8"));
      if (myChart == null) {
        myChart = echarts.init(document.getElementById("chart8"));
      }
      let option = {
        grid: {
          top: "15%",
          right: "3%",
          left: "2%",
          bottom: "8%",
          containLabel: true
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            label: {
              backgroundColor: "#6a7985"
            }
          },
          formatter: function(params) {
            // 自定义显示内容
            // params 是一个包含当前数据信息的数组
            let result = params[0].name + "点" + "<br/>";
            params.forEach(function(item) {
              result += item.marker + item.value + "只/次";
            });
            return result;
          }
        },
        title: {
          text: "(单位:只/次)",
          top: 0,
          textStyle: {
            color: "rgba(255, 255, 255, 0.80)",
            fontSize: ".12rem"
          }
        },
        xAxis: {
          data: x,
          type: "category",
          axisTick: {
            show: false,
            alignWithLabel: false
          },
          axisLabel: {
            textStyle: {
              show: false,
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".12rem"
            },
            // rotate: "45",
            interval: 0
          }
        },
        yAxis: {
          type: "value",
          splitLine: {
            show: false,
            lineStyle: {
              color: "rgba(255, 255, 255, 0.80)"
            }
          },
          axisLine: {
            show: true //不显示坐标轴线
          },
          axisLabel: {
            textStyle: {
              fontFamily: "PingFang",
              // color: '#5DCFF6',
              color: "rgba(255, 255, 255, 0.80)",
              fontSize: ".12rem"
            }
          }
        },
        series: [
          {
            data: y,
            name: "",
            type: "line",
            symbol: "none",
            symbol: "circle",
            smooth: true,
            symbolSize: 10,
            lineStyle: {
              width: 1,
              type: "solid"
            },
            itemStyle: {
              borderWidth: 2,
              borderColor: "#fff",
              color: "#8c00ff"
            },
            areaStyle: {
              color: "#fff",
              //线性渐变，前4个参数分别是x0,y0,x2,y2(范围0~1);相当于图形包围盒中的百分比。如果最后一个参数是‘true’，则该四个值是绝对像素位置。
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    // color: 'RGBA(184, 204, 241, 1)'
                    color: "#8c00ff"
                  },
                  //   {
                  //     offset: 0.5,
                  //     // color: 'RGBA(184, 204, 241, 0.5)'
                  //     color: "#0879FF",
                  //   },
                  {
                    offset: 1,
                    color: "#132443"
                    // color: '#283D46'
                  }
                ],
                false
              ),
              shadowBlur: 0 //shadowBlur设图形阴影的模糊大小。配合shadowColor,shadowOffsetX/Y, 设置图形的阴影效果。
            }
          }
        ],
        dataZoom: [
          {
            //添加dataZoom属性即可显示滑动条S
            orient: "horizontal",
            show: true, //控制滚动条显示隐藏
            realtime: true, //拖动滚动条时是否动态的更新图表数据
            handleSize: 0,
            height: "3%", //滚动条高度
            start: 0, //滚动条开始位置（共6等份）
            end: 60, //滚动条结束位置
            top: "94%",
            // bottom: '20%',
            left: "9%", //滚动条靠左侧的百分比
            zoomLock: false, //控制面板是否进行缩放
            startValue: 0, // 从头开始。
            endValue: 5, // 一次性展示6个
            showDetail: false, // 关闭滚动条提示
            // backgroundColor: "rgb(63, 116, 168 , 0.5)",
            backgroundColor: "#0d5156",
            // fillerColor: "rgba(255, 255, 255,0.5)",
            fillerColor: "#2EFFF2",
            borderColor: "#ffca38",
            zoomLock: true,
            zoomOnMouseWheel: false,
            brushSelect: false,
            showDetail: false,
            showDataShadow: false
          }
        ]
      };
      myChart.setOption(option);
      setTimeout(function() {
        myChart.resize();
      }, 100);
      window.addEventListener("resize", function() {
        myChart.resize();
      });
    },
    async getMonitoring() {
      let res = await http.get(api.getHabitatSpeciesApi, {
        areaId: this.areaId,
        paramYear: this.years,
        speciesName: this.fowltxt
      });
      if (res.data.code === 200) {
        let arr = res.data.data;
        // let transformedData = arr.map(item => {
        //   // 将title属性改为name，将noticeNumber属性改为value
        //   return {
        //     name: item.habitatName,
        //     value: item.speciesNumber
        //   };
        // });
        // data = transformedData
        // let dataNum = 0
        // for (var i = 0; i < data.length; i++) {
        //   // console.log(data[i].value, 'data[i].value');
        //   dataNum += data[i].value;
        // }
        // option3.graphic.style.text = '总次数' + '\n\n' + dataNum
        // option3.series[0].data = data
        // dataNum = 0
      }
    }
  }
};
</script>
<style>
.el-autocomplete-suggestion {
  background: #062730;
  border: 1px solid rgba(46, 205, 255, 1);
}

.el-autocomplete-suggestion li:hover {
  background: transparent;
  color: #2efff2;
}

.el-autocomplete-suggestion li {
  color: #fff;
}

.custom-mouse-position {
  color: white;
  z-index: 999;
  font-weight: bold;
}

.el-message .el-icon-warning {
  font-size: 0.14rem !important;
}

.bigVideo {
  background-color: #002e2c;
}

.bigVideo > .el-table {
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  border: none;
  overflow: hidden;
  --el-table-bg-color: none;
  --el-table-tr-bg-color: none !important;
  --el-table-border-color: none;
  --el-table-row-hover-bg-color: var(--el-transfer-border-color);
  --el-table-border: 1px solid rgba(255, 255, 255, 0.5) !important;
  --el-table-current-row-bg-color: none;
  --el-table-tr-bg-color: none;
}

.bigVideo > .el-table tr {
  background-color: #002e2c;
}

.bigVideo > .el-table--scrollable-y .el-table__body-wrapper {
  overflow: auto;
}
.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar {
  width: 0.05rem !important;
  /*  设置纵轴（y轴）轴滚动条 */
}

.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-thumb {
  border-radius: 0px !important;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #28dcd3 !important;
}

.el-table--scrollable-y .el-table__body-wrapper::-webkit-scrollbar-track {
  border-radius: 0 !important;
  /* box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
        background: rgba(186, 230, 255, 0.80); */
  /* background: #fff !important; */
}
.bigVideo > .el-table__body-wrapper {
  background-color: #002e2c;
}

.bigVideo
  > .el-table--enable-row-hover
  .el-table__body
  tr:hover
  > td.el-table__cell {
  background-color: #002e2c !important;
}
.el-table__body {
  width: 13.39rem !important;
  background-color: #002e2c;
}
.bigVideo > .el-carousel__item {
  display: flex !important;
}

.bigVideo > .el-table__expanded-cell {
  --el-table-bg-color: none;
  color: #93dcfe;
  font-size: 0.24rem;
  font-weight: 700;
}

/* .bigVideo>.el-table th.el-table__cell {
  background: rgba(248, 72, 72, 0.20) !important;
  height: .58rem;
} */

.bigVideo > .el-table-column {
  color: #fff !important;
}

.bigVideo > .el-table .cell {
  padding: 0;
  text-align: center;
  font-size: 0.14rem;
  line-height: 0.15rem !important;
}
.el-select-dropdown {
  border: 1px solid rgba(46, 205, 255, 0.6);
  background: rgba(0, 46, 44, 0.7);
}
.el-select-dropdown__item.selected {
  color: #2efff2;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  color: white;
}

.el-select-dropdown__item {
  color: #34ceff;
}

.el-select-dropdown__item.hover,
.el-select-dropdown__item:hover {
  background: rgba(46, 255, 242, 0.1);
}

:root {
  --el-border-color: rgba(230, 247, 255, 0.2);
}
.el-pagination__sizes .el-input .el-input__inner {
  width: 1rem;
  background-color: #002e2c !important;
  border: 1px solid rgba(46, 205, 255, 0.6);
  color: #fff;
}
.el-pagination__jump .el-input__inner {
  width: 0.46rem;
  background-color: #002e2c !important;
  border: 1px solid rgba(46, 205, 255, 0.6);
  color: #fff;
}
/* .el-table td.el-table__cell{} */
.el-table,
.el-table th.el-table__cell.is-leaf {
  border-bottom: none !important;
}

.bigVideo > .el-table th.el-table__cell {
  background: #1a8a83 !important;
}

.bigVideo > .el-table thead {
  color: #fff !important;
}

.bigVideo > .el-table {
  --el-table-border: 1px solid rgba(38, 27, 192, 0.2) !important;
}

.el-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 0.2rem;
  z-index: 101;
  border-top: none;
}

.el-pagination__sizes {
  color: #fff;
}

/* el-select__caret el-input__icon el-icon-arrow-up */
/* .el-select__caret .el-input__icon .el-icon-arrow-up{
  margin-top: 10px;
} */
.el-input--mini .el-input__icon {
  /* padding-bottom: 0.05rem; */
  line-height: 0rem;
}

.is-scrolling-none {
  /* border-bottom: 2px solid #14635e; */
}

:root {
  --el-fill-color-blank: none;
  --el-text-color-regular: #fff;
}

.bigVideo > tbody > tr {
  height: 1.1rem;
}

.el-pagination button {
  color: #fff !important;
}

.btn-prev {
  background-color: #14635e !important;
}

.btn-next {
  background-color: #14635e !important;
}

.el-pagination__jump {
  color: #fff !important;
}

.el-pager li.active {
  background-color: #2efff2 !important;
}

.el-pager li {
  margin: 0 0.02rem;
  color: #fff !important;
  background-color: #14635e !important;
}

.el-pagination__total {
  color: #fff !important;
}

.el-select__caret {
  color: #fff !important;
}

.el-dropdown-menu__item:not(.is-disabled) {
  color: aqua;
}

/* 时间选择器 */
.el-date-picker {
  --el-datepicker-text-color: #fff;
}

.el-picker__popper {
  --el-datepicker-border-color: rgba(102, 225, 252, 0.5);
}
.nav_right .el-input__prefix {
  line-height: 0.4rem;
}
.el-dialog__wrapper {
  z-index: 9999999 !important;
}
.nav_right .el-input__inner {
  background-color: transparent;
  color: #fff;
  height: 0.4rem;
  width: 2.08rem;
  border-color: rgba(102, 225, 252, 0.5);
}
.el-picker-panel {
  background-color: #062730;
  color: #fff;
}
.el-date-picker__header-label {
  color: #fff;
}
.el-year-table td .cell {
  color: #fff;
}
.el-date-editor.el-input {
  width: 2.08rem;
}
</style>
<style scoped>
@import "../../../static/css/Map.css";
</style>
